<template>
    <div class="box">
        <div style="width: 100%; height: 100%" id="main2"></div>
        <img src="../../assets/largeScreen/reduce.png" alt="" class="fullscreen-img" @click="reduce">
    </div>
</template>

<script>
import { loadBMap } from '../../utils/map.js'
import * as echarts from 'echarts';
import 'echarts/extension/bmap/bmap';
import { vehicleMapInformation } from '../../api/largeScreen/index.js'
export default {
    props: {
        mapChange: {
            type: Function,
            default: null
        },
    },
    data() {
        return {
            list1: [], // 正常车辆
            list2: [], // 维保车辆
            list3: [], // 到期车辆
            list4: [], // 告警车辆
            list5: [], // 门店信息
            allList: [], // 全部信息
        }
    },
    mounted() {

        // 渲染地图
        loadBMap('z4OGmOGp71v2DGfO4RHOV0F0dZTi1Izp').then((res) => {

            this.getVehicleMapInformation()
        })


    },
    methods: {
        // 获取车辆数据
        getVehicleMapInformation() {
            vehicleMapInformation().then((res) => {
                if (res.code == 200) {
                    // this.list1 = res.data.ordinary
                    // this.list2 = res.data.maintenance
                    // this.list3 = res.data.insure
                    // this.list4 = res.data.alarm
                    if (res.data.ordinary.length > 0) {
                        res.data.ordinary.map((res) => {
                            let obj = {
                                name: '',
                                value: []
                            }
                            obj.name = res.carNo
                            obj.value = res.coordinate
                            this.list1.push(obj)
                        })
                    }
                    if (res.data.maintenance.length > 0) {
                        res.data.maintenance.map((res) => {
                            let obj = {
                                name: '',
                                value: []
                            }
                            obj.name = res.carNo
                            obj.value = res.coordinate
                            this.list2.push(obj)
                        })
                    }
                    if (res.data.insure.length > 0) {
                        res.data.insure.map((res) => {
                            let obj = {
                                name: '',
                                value: []
                            }
                            obj.name = res.carNo
                            obj.value = res.coordinate
                            this.list3.push(obj)
                        })
                    }
                    if (res.data.alarm.length > 0) {
                        res.data.alarm.map((res) => {
                            let obj = {
                                name: '',
                                value: []
                            }
                            obj.name = res.carNo
                            obj.value = res.coordinate
                            this.list4.push(obj)
                        })
                    }
                    if (res.data.stores.length > 0) {
                        res.data.stores.map((res) => {
                            let obj = {
                                name: '',
                                value: []
                            }
                            obj.name = res.carNo
                            obj.value = res.coordinate
                            this.list5.push(obj)
                        })
                    }
                    this.allList = [...res.data.ordinary, ...res.data.maintenance, ...res.data.insure, ...res.data.alarm, ...res.data.stores]
                    this.drawLine();
                }

            })
        },
        // 地图缩小
        reduce() {
            this.mapChange(2, this.XY)

        },
        drawLine() {
            if (document.getElementById('main2') == null) {
                return
            }
            echarts.dispose(document.getElementById('main2'))
            var chartDom = document.getElementById('main2');
            var myChart = echarts.init(chartDom);
            var option;
            var data1 = this.list1
            var data2 = this.list2
            var data3 = this.list3
            var data4 = this.list4
            var data5 = this.list5
            var all = this.allList
            const convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };
            option = {
                title: {
                    text: '车辆监控',
                    left: 'center',
                    textStyle: {
                        color: ' #fff'
                    }
                },
                tooltip: {
                    show: true,
                    trigger: 'item',
                    backgroundColor: 'transparent',
                    padding: [0, 0, 0, 0],
                    className: 'custom-tooltip',
                    borderWidth: 0,
                    formatter: function (params) {
                        console.log(params);
                        let carNo = ''
                        let carStatus = ''
                        let carInfo = ''
                        let memberName = ''
                        let contactPhone = ''
                        let list = []
                        all.map((res) => {
                            if (res.carNo == params.name) {
                                carNo = res.carNo == null ? '--' : res.carNo
                                carStatus = res.carStatus == null ? '' : res.carStatus
                                carInfo = res.carInfo == null ? '--' : res.carInfo
                                memberName = res.memberName == null ? '--' : res.memberName
                                contactPhone = res.contactPhone == null ? '--' : res.contactPhone
                                list = res.item
                            }
                        })
                        let str1 = ''
                        if (list) {
                            list.map((res) => {
                                str1 = `<div style='background: rgba(0,20,29,0.27);margin:5px 10px;text-align:center;border-radius:5px;width:210px;overflow:hidden'>${res}</div>${str1}`
                            })
                        }
                        console.log(str1)
                        var str = `<div style = " color:#fff;background-color:none;position: relative;">
                                    <img src='${require("../../assets/largeScreen/mapAleart.png")}' style="width:250px;min-height:250px;display: inline-block;position: absolute;top:0;left:0"></img>
                                    <div style="width:250px;min-sheight:250px;padding:15px 10px;font-size:12px;position: absolute;top:0px;left:0;z-index:3">
                                        <div style='margin:3px 10px;text-align:center;font-size:14px'>
                                            <div style='float:left'>${carNo}</div>  
                                            <div style='float:right'>${carStatus}</div>
                                        </div>
                                        <div style='margin:3px 10px;margin-top:8px;width:210px;overflow:hidden'>${carInfo}</div>
                                        <div style='margin:3px 10px;'>姓名：${memberName || '无'}</div>
                                        <div style='margin:3px 10px;'>手机号：${contactPhone || '无'}</div> 
                                        ${str1}
                                    </div>
                            
                                </div>`
                        return str
                    }
                },
                bmap: {
                    center: [104.114129, 37.550339],
                    zoom: 5,
                    roam: true,
                    mapStyle: {
                        styleJson: [{
                            "featureType": "land",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#242f3eff"
                            }
                        }, {
                            "featureType": "manmade",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#242f3eff"
                            }
                        }, {
                            "featureType": "water",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#17263cff"
                            }
                        }, {
                            "featureType": "road",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#9e7d60ff"
                            }
                        }, {
                            "featureType": "road",
                            "elementType": "geometry.stroke",
                            "stylers": {
                                "color": "#554631ff"
                            }
                        }, {
                            "featureType": "districtlabel",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#d69563ff"
                            }
                        }, {
                            "featureType": "districtlabel",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#17263cff",
                                "weight": 3
                            }
                        }, {
                            "featureType": "poilabel",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#d69563ff"
                            }
                        }, {
                            "featureType": "poilabel",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#17263cff",
                                "weight": 3
                            }
                        }, {
                            "featureType": "subway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "railway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "poilabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "subwaylabel",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "subwaylabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "tertiarywaysign",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "tertiarywaysign",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "provincialwaysign",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "provincialwaysign",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "nationalwaysign",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "nationalwaysign",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "highwaysign",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "highwaysign",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "green",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#263b3eff"
                            }
                        }, {
                            "featureType": "nationalwaysign",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#d0021bff"
                            }
                        }, {
                            "featureType": "nationalwaysign",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#ffffffff"
                            }
                        }, {
                            "featureType": "city",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "on"
                            }
                        }, {
                            "featureType": "city",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "city",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#d69563ff"
                            }
                        }, {
                            "featureType": "city",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#17263cff"
                            }
                        }, {
                            "featureType": "water",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#d69563ff"
                            }
                        }, {
                            "featureType": "water",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#242f3eff"
                            }
                        }, {
                            "featureType": "local",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#38414eff"
                            }
                        }, {
                            "featureType": "local",
                            "elementType": "geometry.stroke",
                            "stylers": {
                                "color": "#ffffff00"
                            }
                        }, {
                            "featureType": "fourlevelway",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#38414eff"
                            }
                        }, {
                            "featureType": "fourlevelway",
                            "elementType": "geometry.stroke",
                            "stylers": {
                                "color": "#ffffff00"
                            }
                        }, {
                            "featureType": "tertiaryway",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#38414eff"
                            }
                        }, {
                            "featureType": "tertiaryway",
                            "elementType": "geometry.stroke",
                            "stylers": {
                                "color": "#ffffff00"
                            }
                        }, {
                            "featureType": "tertiaryway",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#759879ff"
                            }
                        }, {
                            "featureType": "fourlevelway",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#759879ff"
                            }
                        }, {
                            "featureType": "highway",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#759879ff"
                            }
                        }, {
                            "featureType": "highway",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#9e7d60ff"
                            }
                        }, {
                            "featureType": "highway",
                            "elementType": "geometry.stroke",
                            "stylers": {
                                "color": "#554631ff"
                            }
                        }, {
                            "featureType": "provincialway",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#9e7d60ff"
                            }
                        }, {
                            "featureType": "provincialway",
                            "elementType": "geometry.stroke",
                            "stylers": {
                                "color": "#554631ff"
                            }
                        }, {
                            "featureType": "tertiaryway",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#1a2e1cff"
                            }
                        }, {
                            "featureType": "fourlevelway",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#1a2e1cff"
                            }
                        }, {
                            "featureType": "highway",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#1a2e1cff"
                            }
                        }, {
                            "featureType": "nationalway",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#1a2e1cff"
                            }
                        }, {
                            "featureType": "nationalway",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#759879ff"
                            }
                        }, {
                            "featureType": "nationalway",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#9e7d60ff"
                            }
                        }, {
                            "featureType": "nationalway",
                            "elementType": "geometry.stroke",
                            "stylers": {
                                "color": "#554631ff"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#9e7d60ff"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "elementType": "geometry.stroke",
                            "stylers": {
                                "color": "#554631ff"
                            }
                        }, {
                            "featureType": "arterial",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#9e7d60ff"
                            }
                        }, {
                            "featureType": "arterial",
                            "elementType": "geometry.stroke",
                            "stylers": {
                                "color": "#554631fa"
                            }
                        }, {
                            "featureType": "medicallabel",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "medicallabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "entertainmentlabel",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "entertainmentlabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "estatelabel",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "estatelabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "businesstowerlabel",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "businesstowerlabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "companylabel",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "companylabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "governmentlabel",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "governmentlabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "restaurantlabel",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "restaurantlabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "hotellabel",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "hotellabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "shoppinglabel",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "shoppinglabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "lifeservicelabel",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "lifeservicelabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "carservicelabel",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "carservicelabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "financelabel",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "financelabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "otherlabel",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "otherlabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "airportlabel",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "on"
                            }
                        }, {
                            "featureType": "airportlabel",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#d69563ff"
                            }
                        }, {
                            "featureType": "airportlabel",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#17263cff"
                            }
                        }, {
                            "featureType": "airportlabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "highway",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "6"
                            }
                        }, {
                            "featureType": "highway",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "7"
                            }
                        }, {
                            "featureType": "highway",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "8"
                            }
                        }, {
                            "featureType": "highway",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "9"
                            }
                        }, {
                            "featureType": "highway",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "10"
                            }
                        }, {
                            "featureType": "highway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "6"
                            }
                        }, {
                            "featureType": "highway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "7"
                            }
                        }, {
                            "featureType": "highway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "8"
                            }
                        }, {
                            "featureType": "highway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "9"
                            }
                        }, {
                            "featureType": "highway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "10"
                            }
                        }, {
                            "featureType": "nationalway",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "6"
                            }
                        }, {
                            "featureType": "nationalway",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "7"
                            }
                        }, {
                            "featureType": "nationalway",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "8"
                            }
                        }, {
                            "featureType": "nationalway",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "9"
                            }
                        }, {
                            "featureType": "nationalway",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "10"
                            }
                        }, {
                            "featureType": "nationalway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "6"
                            }
                        }, {
                            "featureType": "nationalway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "7"
                            }
                        }, {
                            "featureType": "nationalway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "8"
                            }
                        }, {
                            "featureType": "nationalway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "9"
                            }
                        }, {
                            "featureType": "nationalway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "10"
                            }
                        }, {
                            "featureType": "nationalway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "6"
                            }
                        }, {
                            "featureType": "nationalway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "7"
                            }
                        }, {
                            "featureType": "nationalway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "8"
                            }
                        }, {
                            "featureType": "nationalway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "9"
                            }
                        }, {
                            "featureType": "nationalway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "10"
                            }
                        }, {
                            "featureType": "highway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "6"
                            }
                        }, {
                            "featureType": "highway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "7"
                            }
                        }, {
                            "featureType": "highway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "8"
                            }
                        }, {
                            "featureType": "highway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "9"
                            }
                        }, {
                            "featureType": "highway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "10"
                            }
                        }, {
                            "featureType": "provincialway",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "8,9",
                                "level": "8"
                            }
                        }, {
                            "featureType": "provincialway",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "8,9",
                                "level": "9"
                            }
                        }, {
                            "featureType": "provincialway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "8,9",
                                "level": "8"
                            }
                        }, {
                            "featureType": "provincialway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "8,9",
                                "level": "9"
                            }
                        }, {
                            "featureType": "provincialway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "8,9",
                                "level": "8"
                            }
                        }, {
                            "featureType": "provincialway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "8,9",
                                "level": "9"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "6"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "7"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "8"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "9"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "10"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "6"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "7"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "8"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "9"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "10"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "6"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "7"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "8"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "9"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "6,10",
                                "level": "10"
                            }
                        }, {
                            "featureType": "arterial",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "9,10",
                                "level": "9"
                            }
                        }, {
                            "featureType": "arterial",
                            "stylers": {
                                "curZoomRegionId": "0",
                                "curZoomRegion": "9,10",
                                "level": "10"
                            }
                        }, {
                            "featureType": "arterial",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "9,10",
                                "level": "9"
                            }
                        }, {
                            "featureType": "arterial",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "9,10",
                                "level": "10"
                            }
                        }, {
                            "featureType": "arterial",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "9,10",
                                "level": "9"
                            }
                        }, {
                            "featureType": "arterial",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off",
                                "curZoomRegionId": "0",
                                "curZoomRegion": "9,10",
                                "level": "10"
                            }
                        }, {
                            "featureType": "building",
                            "elementType": "geometry.topfill",
                            "stylers": {
                                "color": "#2a3341ff"
                            }
                        }, {
                            "featureType": "building",
                            "elementType": "geometry.sidefill",
                            "stylers": {
                                "color": "#313b4cff"
                            }
                        }, {
                            "featureType": "building",
                            "elementType": "geometry.stroke",
                            "stylers": {
                                "color": "#1a212eff"
                            }
                        }, {
                            "featureType": "road",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#759879ff"
                            }
                        }, {
                            "featureType": "road",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#1a2e1cff"
                            }
                        }, {
                            "featureType": "provincialway",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#759879ff"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#759879ff"
                            }
                        }, {
                            "featureType": "arterial",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#759879ff"
                            }
                        }, {
                            "featureType": "provincialway",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#1a2e1cff"
                            }
                        }, {
                            "featureType": "cityhighway",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#1a2e1cff"
                            }
                        }, {
                            "featureType": "arterial",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#1a2e1cff"
                            }
                        }, {
                            "featureType": "local",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "manmade",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#d69563ff"
                            }
                        }, {
                            "featureType": "manmade",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#17263cff"
                            }
                        }, {
                            "featureType": "subwaystation",
                            "elementType": "geometry",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "transportationlabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "transportationlabel",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "estate",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#2a3341ff"
                            }
                        }]
                    }
                },
                series: [
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        // symbol: 'diamond',
                        showEffectOn: 'render',
                        rippleEffect: {
                            period: 10,
                            scale: 6,
                            brushType: 'fill'
                        },
                        zlevel: 10, // 这里是关键，一定要放在 series中，显示层级，
                        hoverAnimation: true,
                        itemStyle: {
                            normal: {
                                // 点的颜色可以根据 params 参数里面的值去设定不通的颜色
                                color: function (params) {
                                    if (params.name == '7300网关') {
                                        return 'red';
                                    }
                                    if (params.name == '700网关') {
                                        return 'yellow';
                                    }
                                    if (params.name == '5300网关') {
                                        return 'green';
                                    } else {
                                        return 'pink';
                                    }

                                },
                                shadowBlur: 10,
                                shadowColor: '#333'
                            }
                        },
                        data: data5 // 点的数据，包含经纬度
                    },
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        // symbol: 'diamond',
                        showEffectOn: 'render',
                        rippleEffect: {
                            period: 10,
                            scale: 6,
                            brushType: 'fill'
                        },
                        zlevel: 10, // 这里是关键，一定要放在 series中，显示层级，
                        hoverAnimation: true,
                        itemStyle: {
                            normal: {
                                // 点的颜色可以根据 params 参数里面的值去设定不通的颜色
                                color: function (params) {
                                    if (params.name == '7300网关') {
                                        return 'red';
                                    }
                                    if (params.name == '700网关') {
                                        return 'yellow';
                                    }
                                    if (params.name == '5300网关') {
                                        return 'green';
                                    } else {
                                        return 'pink';
                                    }

                                },
                                shadowBlur: 10,
                                shadowColor: '#333'
                            }
                        },
                        data: data1 // 点的数据，包含经纬度
                    },
                    {
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        //要有对应的经纬度才显示，先经度再维度
                        data: data2,
                        showEffectOn: 'render',
                        symbolSize: 30,
                        // label: {
                        //     normal: {
                        //         show: true,
                        //         formatter: function (params) { //标签内容
                        //             return params.name;
                        //         },
                        //         lineHeight: 15,
                        //         backgroundColor: 'rgba(255,255,255,.9)',
                        //         borderColor: '#80cffd',
                        //         borderWidth: '1',
                        //         padding: [2, 2, 2, 2],
                        //         color: '#000000',
                        //         fontSize: 10,
                        //         borderRadius: '15',
                        //         fontWeight: 'normal',
                        //     },
                        //     emphasis: {
                        //         show: true
                        //     }
                        // },
                        itemStyle: {
                            normal: {
                                color: '#32cd32',
                                shadowBlur: 10,
                                shadowColor: '#333'
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                color: '#f4e925' // 高亮颜色
                            }
                        },
                        zlevel: 10,
                        symbol: 'image://' + require('../../assets/largeScreen/wiebao.png'),
                    },
                    {
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        //要有对应的经纬度才显示，先经度再维度
                        data: data3,
                        showEffectOn: 'render',
                        symbolSize: 30,

                        itemStyle: {
                            normal: {
                                color: '#32cd32',
                                shadowBlur: 10,
                                shadowColor: '#333'
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                color: '#f4e925' // 高亮颜色
                            }
                        },
                        zlevel: 10,
                        symbol: 'image://' + require('../../assets/largeScreen/gaojing.png'),
                    },
                    {
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        //要有对应的经纬度才显示，先经度再维度
                        data: data4,
                        showEffectOn: 'render',
                        symbolSize: 30,

                        itemStyle: {
                            normal: {
                                color: '#32cd32',
                                shadowBlur: 10,
                                shadowColor: '#333'
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                color: '#f4e925' // 高亮颜色
                            }
                        },
                        zlevel: 10,
                        symbol: 'image://' + require('../../assets/largeScreen/daoqi.png'),
                    },
                ]
            };

            option && myChart.setOption(option);

        }

    },
};
</script>
<style lang="scss" scoped>
.box {
    position: relative;

    .fullscreen-img {
        width: 1.5vw;
        height: 1.5vw;
        display: block;
        position: absolute;
        right: 5%;
        top: 10px;
        cursor: pointer;
        z-index: 2;
    }
}
</style>